<template>
    <div>
        <div class="header">
            <van-uploader class="uploader" preview-size="100vw" :after-read="afterRead"/>
        <van-field label="头像" center input-align="right">
            <div slot="input" class="headImg">
                <img v-if="userData.user_img!=null" :src="userData.user_img" alt="">
                <img v-else src="~assets/img/default_img.jpg" alt="">
            </div>
        </van-field>
        </div>

        <van-field @click="shut1" label="昵称" input-align="right">
            <div slot="input">{{userData.name}}</div>
        </van-field>
        <van-field label="账号" input-align="right">
            <div slot="input">{{userData.username}}</div>
        </van-field>
        <van-field label="性别" input-align="right" @click="showThree = true">
            <div slot="input">
                <div v-if="userData.gender!==null">{{userData.gender==1?'男':'女'}}</div>
                <div v-else>请选择</div>
            </div>
        </van-field>
            <van-field @click="shut2" label="个性签名" input-align="right">
                <div slot="input">
                    <span v-if="userData.user_desc!=null">{{userData.user_desc.substr(0,4)}}...</span>
                    <span v-else>空</span>
                </div>
            </van-field>

        <div class="button">
            <van-field input-align="center" @click="backLogin">
                <div slot="input" >退出登录</div>
            </van-field>
            <van-field input-align="center" @click="$router.push('/userInfo')">
                <div slot="input">返回空间</div>
            </van-field>
        </div>

<!--        昵称修改弹出框-->
        <van-dialog v-model="show" @confirm="confirm()" title="昵称：" show-cancel-button>
            <van-field autofocus input-align="center" v-model="content"/>
        </van-dialog>
        <!--        个性签名修改弹出框-->
        <van-dialog v-model="showTwo" @confirm="confirmTwo()" title="个性签名：" show-cancel-button>
            <van-field
                    v-model="contentTwo"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入留言"
                    show-word-limit
                    autofocus
            />
        </van-dialog>
<!--        性别选择-->
        <van-action-sheet v-model="showThree" :actions="actions" @select="onSelect" />

    </div>
</template>

<script>
    import {formatDate} from "common/utils";
    export default {
        name: "UserEditBanner",
        data(){
            return{
                content:'',
                show:false,
                showTwo:false,
                contentTwo:'',
                showThree:false,
                actions: [{ name: '男' ,val:1}, { name: '女' ,val:0}],
                showFour:false,
                minDate: new Date(1920, 0, 1),
                maxDate: new Date(2018, 11, 1),
                currentDate: new Date(),
            }
        },
        props:['userData'],
        methods:{
            async afterRead(file){
                const formData = new FormData()
                formData.append('file',file.file)
                const {data:res} = await this.$http.post('/upload',formData)
                console.log(res);
                this.$store.commit('setHeader',res.url)
            },
            confirm(){
                if (this.content.trim() === ''){
                    this.show = this.userData.name
                    this.$toast.fail('修改失败，昵称不能为空')
                    return
                }
                this.$store.commit('setName',this.content)
            },
            confirmTwo(){
                this.$store.commit('setMessage',this.contentTwo)
            },
            shut1(){
                this.show = true
                this.content = this.userData.name
            },
            shut2(){
                this.showTwo = true
                this.contentTwo = this.userData.user_desc
            },
            onSelect(data){
                console.log(data);
                this.$store.commit('chooseSex',data.val)
                this.showThree = false
            },
            backLogin(){
                localStorage.clear()
                this.$router.push('/login')
            }

        },
    }
</script>

<style scoped lang="less">
    .van-cell{
        border-bottom: 0.323vw solid #ededed;
        font-size: 4vw;
        padding: 2.581vw 5.161vw;
        color: #111111
    }
    .headImg{
        img{
            border-radius: 50%;
            width: 12.26667vw;
            height: 12.26667vw;
        }
    }
    .button{
        margin-top: 6.452vw;
        div{
            font-size: 4vw;
            color: #505050;
        }
    }
    .header{
        position: relative;
        overflow: hidden;
        .uploader{
            position: absolute;
            z-index: 9999;
            opacity: 0;
        }
    }

</style>